<template>
<!-- ref帮助获取dom -->
    <div class="list" ref="wrapper">
        <div>
            <div class="area">
                <div class="title border-topbottom">当前城市</div>
                <div class="button-list">
                    <div class="button-wraper">
                        <div class="button">{{this.$store.state.city}}</div>
                    </div>
                </div>
            </div>
            <div class="area">
                <div class="title border-topbottom">热门城市</div>
                <div class="button-list">
                    <div class="button-wraper" v-for="(item, index) in hotCities" :key=index
                        @click="handleCityClick(item.name)">
                        <div class="button">{{item.name}}</div>
                    </div>
                </div>
            </div>
            <div class="area" v-for="(item, key) of cities" :key=key :ref=key>
                <div class="title border-topbottom">{{key}}</div>
                <div class="item-list">
                    <div class="item border-bottom"
                         v-for="(subitem, index) of item"
                         :key=index
                         @click="handleCityClick(subitem.name)"
                         >{{subitem.name}}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Bscroll from 'better-scroll'
export default {
  name: 'CityList',
  mounted () {
    this.scroll = new Bscroll(this.$refs.wrapper)
  },
  props: {
    hotCities: Array,
    cities: Object,
    letter: String
  },
  watch: {
    //   监听letter的变化
    letter () {
      if (this.letter) {
        console.log(this.letter)
        //   获取对应的元素
        const element = this.$refs[this.letter][0]
        console.log(element)
        this.scroll.scrollToElement(element)
      }
    }
  },
  methods: {
    handleCityClick (city) {
    // 派发sotre Action
      // this.$store.dispatch('changeCity', city)
      // 或者直接commit提交给mutation
      this.$store.commit('changeCity', city)
      // 通过vue-router进行页面的跳转
      this.$router.push('/')
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '~styles/varibles.styl'
.border-topbottom
    &:before
        border-color #ccc
    &:after
        border-color #ccc
.border-bottom
    &:before
        border-color #ccc
.list
// 调整滚动区域
    overflow hidden
    position absolute
    top 1.58rem
    right 0
    left 0
    bottom 0
.item-list
    .item
        line-height .76rem
        color #666
        padding-left .2rem
.title
    line-height :.44rem
    background #eee
    padding-left .2rem
    color #666
    font-size .26rem
.button-list
    padding .1rem .6rem .1rem .1rem
    overflow hidden
    .button-wraper
        float left  //上面要加overflow
        width 33.33%
        .button
          margin .1rem
          padding .1rem
          border .02rem solid #ccc
          text-align center
          border-radius .06rem
</style>
